<template>
  <div class="footerWrapper">
    <!-- 1.未激活状态 -->
    <div class="disable" v-if="!isShowTextarea">
      <input v-model="content" @focus="showTextarea" class="input" type="text" placeholder="写跟帖" />
      <div class="pinglunWrapper">
        <span class="iconfont iconpinglun-"></span>
        <div class="number">1020</div>
      </div>
      <span class="iconfont iconshoucang" @click="shoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 2.激活状态 -->
    <div class="enable" v-if="isShowTextarea">
      <textarea
        @blur="hideTextarea"
        ref="textarea"
        v-model="content"
        class="textarea"
        name
        id
        cols="30"
        rows="3"
      ></textarea>
      <button class="btnSend" @click="send">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postId", "parentId"],
  data() {
    return {
      isShowTextarea: false,
      content: ""
    };
  },
  methods: {
    showTextarea() {
      this.isShowTextarea = true;
      //这个方法会等待到下次渲染完毕在执行,用定时器也行,但是事件得靠猜
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    hideTextarea() {
      setTimeout(() => {
        this.isShowTextarea = false;
      }, 200);
    },
    send() {
      const data = {
        content: this.content
      };
      if (this.parentId) {
        data.parent_id = this.parentId;
      }
      this.$axios({
        url: "/post_comment/" + this.postId,
        method: "POST",
        // data: {
        //   content: this.content
        // }
        data: data
      }).then(res => {
        console.log(res.data);
        if (res.data.message) {
          this.$toast.success("评论发布成功");
          // 发布成功后清空输入框数据
          this.content = "";
          //提醒父组件刷新评论数据
          this.$emit("reloadComment");
        }
      });
    },
    shoucang() {
      this.$axios({
        url: "/post_star/" + this.$route.query.id,
        method: "GET"
      }).then(res => {
        console.log(res.data);
        if (res.data.message == "收藏成功") {
          this.$toast.success("收藏成功");
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.footerWrapper {
  position: sticky;
  left: 0;
  bottom: 0;
  background-color: #f2f2f2;
  width: 100%;
  padding: 5vw;
  box-sizing: border-box;
  .disable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input {
      font-size: 3.889vw;
      padding: 0 5vw;
      background-color: #d7d7d7;
      border: 0;
      outline: 0;
      height: 10vw;
      line-height: 10vw;
      border-radius: 5vw;
    }
    .iconfont {
      font-size: 6.667vw;
    }
    .pinglunWrapper {
      position: relative;
      .number {
        position: absolute;
        top: -1.667vw;
        left: 1.667vw;
        font-size: 3.333vw;
        background-color: red;
        color: #fff;
        height: 4.444vw;
        line-height: 4.444vw;
        padding: 0.278vw 1.111vw;
        border-radius: 2.222vw;
      }
    }
  }
  .enable {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .textarea {
      padding: 5vw;
      background: #d7d7d7;
      border-radius: 2.222vw;
      border: 0;
      flex: 1;
      resize: none;
    }
    .btnSend {
      color: #fff;
      background-color: red;
      font-size: 3.889vw;
      padding: 0 5vw;
      height: 7.222vw;
      line-height: 7.222vw;
      border-radius: 3.611vw;
      border: 0;
      margin-left: 3.889vw;
    }
  }
}
</style>